<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AllBook</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="/static/imgs/美女.jpg"/>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
    <script src="/static/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <style>
        .myImages {
            border: 1px solid silver;
            margin: 2px;
            cursor: pointer;
        }

        .imageDivs {
            float: left;
        }

        .priceSpan {
            color: orangered;
            font-size: 16px;

        }
    </style>
</head>
<body>
<h1 id="t">所有书籍</h1>
<a href="/bookAddForm">添加书籍</a>
<button onclick="a()">变化</button>
<br>
<button onclick="b()">所有书籍显示</button>
<a class="btn-primary" href="/books">查询所有书籍</a>
[[${bookFenye}]]
<div th:if="${bookFenye2} != null">
    <label for="hasPreviousPageInput"></label>
    <input id="hasPreviousPageInput" th:value="${bookFenye2.hasPreviousPage}"
           hidden="hidden">
    <label for="hasNextPageInput"></label><input id="hasNextPageInput" th:value="${bookFenye2.hasNextPage}"
                                                 hidden="hidden">
    <label for="pageNumInput">

    </label><input id="pageNumInput" th:value="${bookFenye2.pageNum}" hidden="hidden">
    每页显示个数:
    <div style="clear: both">
        <label for="pageSizeInput"></label><input id="pageSizeInput" type="text" th:value="${bookFenye2.pageSize}">
    </div>

    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4" th:each="book:${bookFenye2.list}">
            <img th:id="'book'+${book.id}" class="myImages" onclick='bookDetail(this)' onmouseover='show(this)'
                 onmouseleave='hide(this)' th:src="${book.path}" height="300" width="300" alt="11">
        </div>
    </div>

    <div style="clear:left;">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li id="prePage" onclick="prePage()">
                    <a id="preA" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:if="${bookFenye2.pages}<=10" th:each="i:${#numbers.sequence(1,bookFenye2.pages)}"
                    th:id="'li1'+${i}"><a href="#" onclick="findBook(this)">[[${i}]]</a></li>
                <li th:if="${bookFenye2.pages}>10" th:each="i:${#numbers.sequence(1,10)}" th:id="'li2'+${i}"><a href="#"
                                                                                                                onclick="findBook(this)">[[${i}]]</a>
                </li>
                <!--<li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>-->

                <li id="nextPage" onclick="nextPage()">
                    <a id="nextA" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<button onclick="testJqueryGet()">testJqueryGet</button>
<div>
    <!--    <img src="/static/imgs/584_2020080544256476.jpg" width="292" height="389" alt="11"/>-->
    <!--    <img src="E:\upload\584_2020080544256476.jpg" width="584" height="778" alt="11"/>-->
</div>
<div id="myDiv">

</div>
<!--<table class="table table-border table-hover">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>-->
<!--<div class="page">
    <ul class="pagination"></ul>
</div>-->

<!--<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>

        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>

        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>-->


<script>

    function findBook(o) {
        const page = $(o).html();
        const pageSize = $("#pageSizeInput").val();
        window.location.href = "/books?page=" + page + "&pageSize=" + pageSize;
    }

    function prePage() {

        const page = $("#pageNumInput").val() - 1;
        const pageSize = $("#pageSizeInput").val();
        // $("#prePage").addClass("disabled");
        if ($("#hasPreviousPageInput").val() === 'true') {
            window.location.href = "/books?page=" + page + "&pageSize=" + pageSize;
        }
    }

    function nextPage() {

        const page = $("#pageNumInput").val() - (-1);
        const pageSize = $("#pageSizeInput").val();
        console.log("nextPage" + page);
        // $("#prePage").addClass("disabled");
        if ($("#hasNextPageInput").val() === 'true') {
            window.location.href = "/books?page=" + page + "&pageSize=" + pageSize;
        }
    }


    /*$(function () {
        const pages = $("#pageNumInput").val();
        console.log(pages);
        for (i=1;i<=pages;i++){
            $("#firstLi").append("<li><a href=\"#\">"+i+"</a></li>");
        }
    });*/

    $(function () {
        liActive();
        /*const pageNum = $("#pageNumInput").val();
        if (pageNum==1){
            $("#prePage").addClass("disabled");
        }
        const pages = $("#pagesInput").val();
        console.log("pages"+pages);
        if (pageNum==pages){
            $("#nextPage").addClass("disabled");
        }*/

        // alert("previous "+$("#hasPreviousPageInput").val());
        if ($("#hasPreviousPageInput").val() === 'false') {
            $("#prePage").addClass("disabled");
        }
        // alert("next "+$("#hasNextPageInput").val());
        if ($("#hasNextPageInput").val() === 'false') {
            $("#nextPage").addClass("disabled");
        }
    });

    function liActive() {
        // $(o).addClass("active");
        const pageNum = $("#pageNumInput").val();
        // alert(pageNum);
        $("#li1" + pageNum).addClass("active");
        $("#li2" + pageNum).addClass("active");
    }


    /* function a(){
         $("#t").text("你好");
     }*/
    function liValue(o) {
        return $(o).html();
    }

    function b() {
        $.ajax({
            type: "post",
            // contentType: "application/json;charset=UTF-8",
            url: "/books",
            data: {page: 1, pageSize: 4},
            success: function (result) {
                console.log(result);
                // alert(result);
                const books = result.list;
                console.log(books);
                const myDiv = $("#myDiv");
                myDiv.html("");
                // alert(result.size);
                const pagination = $(".pagination");
                pagination.html("");
                for (let i = 1; i <= result.size; i++) {
                    // const li = document.createElement("li");
                    // li.innerHTML=i;

                    pagination.append("<li id='li" + i + "'><a onclick='liValue(this)' href=\"#\">" + i + "</a></li>");
                }

                for (const book of books) {
                    // alert(book.path.substring(9));

                    myDiv.append("<div class='imageDivs'><img class='myImages' id='book" + book.id + "' onclick='bookDetail(this)' onmouseover='show(this)' onmouseleave='hide(this)' src='" + book.path + "' width='300' height='300' alt='11'><br><span class='priceSpan'>￥" + book.price + "</span></div>");
                }
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                alert(e.responseText);
            }
        });
    }

    /*$(".my-images").onmouseover(function () {
        /!*this.css({
                border:

            }
        );*!/
        this.addClass(".border");
    });*/

    function show(o) {
        $(o).css("border", "1px solid white");
    }

    function hide(o) {
        $(o).css("border", "1px solid silver");
    }

    /* $(".myImages").click(function(){
         $(".myImages").css("border","1px solid black");
     });*/
    function bookDetail(o) {
        const id = $(o).attr("id");
        // alert("id: "+id);
        const bookId = id.substring(4);
        // alert(bookId);
        // $.ajax({
        //     url: "/book/" + id,
        //     data: {"bookId": bookId},
        //     type: "post",
        //     async: false,
        //     success: function (data) {
        //         console.log(data);
        //         // window.location.href = "/bookDetail?bookId=" + data.id;
        //     }
        // });

        window.location.href="/book/"+bookId;
    }

    function testJqueryGet() {
        const url = "/testJqueryGet";
        const id = 13;
        $.get(url, {id: id}, function (result) {
            alert(result.toString());
            console.log(result);
        })
    }


</script>

</body>
</html>